﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Godmother</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <link href="~/Themes/GodMother/_misc/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Themes/GodMother/_misc/css/style_2.css" rel="stylesheet" />
    <link rel="shortcut icon" href="~/Themes/GodMother/_misc/images/favicon.ico" />
    <style>
        .modal-backdrop {
            z-index:0;
        }
        .modal-body video {
            width:100%;
        }
        .modal-dialog{
            height:100%;
        }
        .modal-content {
            top: 40%;
            margin-top: -203px;
        }
    </style>
</head>

<body class="home page page-id-725 page-template-default custom-background">
    @using CoralNode.Core.Entity.Domains.Node;
    @using CoralNode.Core.Client.Models;
    <div id="page-content" style="min-height: 623px;">
        <header id="header" class=" header-open header-transparent">
            <div class="header-top">
                <div class="container">
                    <div class="logo left-float show-dark-logo">
                        <a href="#"><img class="imglogo" src="~/Themes/GodMother/_misc/images/logo.png" /></a>
                    </div>
                    <div class="top-menu">
                        <span class="menu">
                            <img src="~/Themes/GodMother/_misc/images/nav.png" />
                        </span>
                        <ul>
                            <li><a href="index" class="active scroll">Work</a></li>
                            <li><a href="info" class="scroll">Info</a></li>
                            <li><a href="contact" class="scroll">Contact</a></li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

        </header>
        <div class="spacer spacer-big spacer-hero"></div>
        <div>
            <div class="container">
                @{
                    IList<NodeDomain> list = Component.ListNode("product");
                    if (list != null && list.Count() > 0)
                    {
                        foreach (var item in list)
                        {
                            var index = list.IndexOf(item);
                            <div class="page-area wleft">
                                <div class="left_pic @(index % 2 == 0 ? "wleft" : "wright")">
                                    @if (item.Field.Image != null)
                                    {
                                        <div class="wolf-media">
                                            <a data-toggle="modal" data-target="#video@(index)" class="img-hover" onclick="return false;">
                                                <img src="@Html.ImageUrl((FileImageModel)item.Field.Image)" class="img-responsive" width="840" />
                                            </a>
                                        </div>
                                    }
                                </div>
                                <div class="left_word @(index % 2 == 0 ? "wleft" : "wright")">
                                    @if (item.Field.SubName != null)
                                    {
                                        <div class="alttitle">@item.Field.SubName</div>
                                    }
                                    @if (item.Field.Name != null)
                                    {
                                        <div class="alttitle_big">@item.Field.Name</div>
                                    }
                                </div>
                            </div>

                        }
                    }
                }

            </div>


        </div>
    </div>
    <div style="text-align: center; padding: 5em 0 1em 0;"><span><span>©2016&nbsp;</span><span>苏ICP备16062730号</span> </span> </div>
    @if (list != null && list.Count() > 0)
    {
        foreach (var item in list)
        {
            var index = list.IndexOf(item);
            <div id="video@(index)" class="modal fade" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <a class="close" data-dismiss="modal">×</a>
                            <span id="title">@(item.Field.Name ?? "")</span>
                        </div>
                        <div class="modal-body">
                            @if (item.Field.Vedio != null)
                            {
                                <video src="@Html.ImageUrl((FileImageModel)item.Field.Vedio)" controls="controls">
                                    your browser does not support the video tag
                                </video>
                            }
                            else
                            {
                                <p>暂无视频</p>
                            }
                        </div>
                    </div>
                </div>
            </div>
        }
    }
    <script src="~/Themes/GodMother/_misc/js/jquery-3.0.0.min.js"></script>
    <script src="~/Themes/GodMother/_misc/js/bootstrap.min.js"></script>
    <script>
        $("span.menu").click(function () {
            $(".top-menu ul").slideToggle("slow", function () { });
        });
        $('.close').click(function () {
            var player = $(this).closest('.modal-dialog').find('video');
            player.get(0).pause();
        });
    </script>

   
</body>
</html>